<template>
    <div id="aboutus" class="fw-500">
        <div class="logo fs-14 fw-400 dis-flex flex-dir-column flex-y-center">
            <img :src="baseInfo.websiteLogUrl" alt="" />
            <span>{{ baseInfo.websiteNameTitle }}</span>
        </div>
        <div class="option fs-14">
            <div
                class="item dis-flex flex-x-between flex-y-center"
                @click="toAgreement(1)"
            >
                <span>用户协议</span>
                <van-icon name="arrow" color="#979797" size="0.4267rem" />
            </div>
            <div
                class="item dis-flex flex-x-between flex-y-center"
                @click="toAgreement(2)"
            >
                <span>隐私协议</span>
                <van-icon name="arrow" color="#979797" size="0.4267rem" />
            </div>
            <div
                class="item dis-flex flex-x-between flex-y-center"
                @click="toAgreement(3)"
            >
                <span>会员协议</span>
                <van-icon name="arrow" color="#979797" size="0.4267rem" />
            </div>
        </div>

        <div
            @click="telPhone"
            class="phone item fs-14 dis-flex flex-x-between flex-y-center"
        >
            <span>平台客服</span>
            <van-icon name="arrow" color="#979797" size="0.4267rem" />
        </div>
    </div>
</template>

<script>
    export default {
        props: [], // 父辈向子辈传参
        name: 'aboutus',
        components: { // 组件的引用

        },
        data() {
            return {
                checked: true,
                baseInfo: {}
            }
        },
        methods: {
            getBaseInfo() {
                let site = this.$store.state.app.baseInfo
                this.baseInfo = site
            },
            toAgreement(textType) {
                this.$router.push({
                    name: '协议', 
                    params: { textType }
                })
            },
            telPhone() {
                window.location.href = `tel:` + this.baseInfo.serviceTelephone;
            }
        },
        computed: {},
        watch: {},
        created() { },
        mounted() {
            this.getBaseInfo()
        },
    }
</script>
    
<style scoped lang='scss'>
    .logo {
        width: 375px;
        background: #ffffff;
        padding: 32px 0 20px;
        color: #646466;
        line-height: 20px;
        box-sizing: border-box;
        & > img {
            width: 72px;
            height: 72px;
            border-radius: 4px;
            margin-bottom: 8px;
        }
    }
    .option {
        margin-top: 14px;
        background-color: #fff;
        padding: 0 16px;
        .item {
            padding: 14px 0;
            color: #3b3d3d;
            line-height: 20px;
        }
        .item:not(:first-child) {
            border-top: 1px solid #ebeef1;
        }
    }

    .phone {
        background-color: #fff;
        padding: 14px 16px;
        color: #3b3d3d;
        line-height: 20px;
        margin-top: 14px;
    }
</style>